<template>
  <section>
    <div class="container">
      <div class="cash-money">
        <el-tag class="cash-money-item">已提现：{{cash}}</el-tag>
        <el-tag type="danger"
                class="cash-money-item">未提现：{{no_cash}}</el-tag>
      </div>
      <div class="handle-box">
        <el-input v-model="real_name"
                  placeholder="用户"
                  clearable
                  class="handle-input mr10"
                  @keyup.enter.native="handleSearch"></el-input>
        <el-input v-model="mobile"
                  placeholder="手机号"
                  clearable
                  class="handle-input w200 mr10"
                  @keyup.enter.native="handleSearch"></el-input>
        <el-input v-model="card_number"
                  placeholder="卡号"
                  clearable
                  class="handle-input w200 mr10"
                  @keyup.enter.native="handleSearch"></el-input>
        <el-select v-model="status"
                   placeholder="筛选状态"
                   clearable
                   @keyup.enter.native="handleSearch"
                   class="mr10">
          <el-option label="全部"
                     value=""></el-option>
          <el-option label="申请中"
                     value="0"></el-option>
          <el-option label="审核通过"
                     value="1"></el-option>
          <el-option label="审核不通过"
                     value="2"></el-option>
          <el-option label="打款中"
                     value="3"></el-option>
          <el-option label="成功打款"
                     value="4"></el-option>
          <el-option label="打款失败"
                     value="5"></el-option>
        </el-select>
        <el-button type="primary"
                   icon="search"
                   @click="handleSearch">搜索</el-button>
        <el-button type="danger"
                   @click="handleReset">清空</el-button>
      </div>
      <el-table :data="tableData"
                border
                class="table"
                ref="multipleTable"
                v-loading="loading">
        <el-table-column prop="id"
                         label="ID"></el-table-column>
        <el-table-column prop="real_name"
                         label="姓名"></el-table-column>
        <el-table-column prop="mobile"
                         label="电话"></el-table-column>
        <el-table-column prop="full_card_number"
                         label="卡号"></el-table-column>
        <el-table-column prop="bank_name"
                         label="银行名称"></el-table-column>
        <el-table-column prop="amount"
                         label="金额"></el-table-column>
        <el-table-column prop="fee"
                         label="手续费"></el-table-column>
        <el-table-column prop="real_amount"
                         label="实际放款"></el-table-column>
        <el-table-column prop="create_time"
                         label="申请时间"></el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         :formatter="statusFormat"></el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="primary"
                       v-if="scope.row.status == 0"
                       @click="handleCashPass(scope.row.id)"
                       class="mr10">已手动打款</el-button>
            <el-button type="warning"
                       v-if="scope.row.status == 0"
                       @click="handleCashReject(scope.row.id)"
                       class="mr10">驳回</el-button>
            <!-- <el-button type="success" v-if="scope.row.status==1" @click="changeCashStatus(scope.row.id, 4)" class="mr10">已打款</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination"
           style="text-align:center">
        <el-pagination background
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
                       layout="sizes, prev, pager, next,total"
                       :total="pagination.total"
                       :current-page.sync="pagination.currentPage"
                       :page-size="pagination.pageSize"
                       :page-sizes="pagination.pageSizes"
                       :hide-on-single-page="true">
        </el-pagination>
      </div>
    </div>
  </section>
</template>

<script>
import { getCashList, cashPass, cashReject } from '@/api/modules/money'
import moment from 'moment'

export default {
  name: 'money',
  components: {},
  data () {
    return {
      loading: true,
      fatherLoading: false,
      dialogVisible: false,
      tableData: [],
      real_name: '',
      mobile: '',
      card_number: '',
      status: '',
      father_real_name: '',
      father_mobile: '',
      cash: 0,
      no_cash: 0,
      pagination: {
        total: 0,
        pageSize: 20,
        currentPage: 1,
        pageSizes: [10, 20, 30]
      },
      gridData: []
    }
  },
  computed: {},
  created () {
    this.getData()
  },
  methods: {
    search () {
      this.getData()
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      this.getData()
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getData()
    },
    // 获取数据
    getData () {
      this.loading = true
      getCashList({
        page: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        mobile: this.mobile,
        real_name: this.real_name,
        card_number: this.card_number,
        status: this.status
      }).then(res => {
        this.loading = false
        this.tableData = res.data.list
        this.cash = res.data.cash
        this.no_cash = res.data.no_cash
        this.pagination.total = res.data.pagination.total
      })
    },

    /**
     * 重置
     */
    handleReset () {
      this.page = 1
      this.pageSize = 20
      this.mobile = ''
      this.real_name = ''
      this.card_number = ''
      this.level = ''
      this.getData()
    },

    /**
     * 搜索
     */
    handleSearch () {
      // this.$router.replace({ query: '' })
      this.getData()
    },

    statusFormat (row, column) {
      if (row.status === 0) {
        return <el-tag>申请中</el-tag>
      } else if (row.status === 1) {
        return <el-tag type="warning">已打款</el-tag>
      } else if (row.status === 2) {
        return <el-tag type="info">{row.status_message}</el-tag>
      } else if (row.status === 3) {
        return <el-tag type="danger">打款中</el-tag>
      } else if (row.status === 4) {
        return <el-tag type="success">已打款</el-tag>
      } else if (row.status === 5) {
        return <el-tag type="danger">打款失败</el-tag>
      }
    },

    changeCashStatus (id) { },

    handleCashPass (id) {
      this.loading = true
      cashPass({
        cash_id: id
      }).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      })
    },

    handleCashReject (id) {
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '驳回',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          var data = {
            cash_id: id,
            message: value
          }
          this.loading = true
          cashReject(data)
            .then(response => {
              if (response.data.status === 'success') {
                this.$message.success('已成功驳回')
                this.defaultData(
                  this.page,
                  this.pageSize,
                  this.mobile,
                  this.real_name,
                  this.card_number
                )
              } else {
                this.$message.console.error(response.data.failedMsg)
              }
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 100px;
  display: inline-block;
}
.w200 {
  width: 200px;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.cash-money {
  padding: 20px;
  padding-left: 0;
}
.cash-money-item {
  margin-right: 20px;
}
</style>
